<template>
  <el-card>
    <NavBar>
      <el-form-item label="名称">
        <el-input v-model="search.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="search.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="search.phone" placeholder="请输入手机号" />
      </el-form-item>
      <template #right>
        <el-button type="primary" icon="search" @click="init(1)">搜索</el-button>
        <el-button type="primary" icon="refresh" @click="reset">重置</el-button>
      </template>
    </NavBar>
  </el-card>
  <div class="flex justify-end items-center h-[60px]">
    <el-button icon="plus" type="primary" @click="add_visible = true">添加</el-button>
  </div>
  <el-card>
    <el-table :data="tableData" style="width: 100%;height: 30rem;" stripe>
      <el-table-column prop="name" label="头像" width="120" >
        <template #default="scope">
          <img :src="imgUrl + scope.row.avator" style="width: 50px;height: 50px;border-radius: 50%">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="120" />
      <el-table-column prop="account" label="账号" width="120" />
      <el-table-column prop="roleName" label="角色" width="120" />
      <el-table-column prop="phone" label="手机号" width="120" />
      <el-table-column prop="address" label="地址" width="220" />
      <el-table-column prop="createTime" label="创建时间" min-width="220">
        <template #default="scope">
          {{ checkTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" min-width="220">
        <template #default="scope">
          {{ checkTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <div class="flex items-center gap-2">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteMsg(handleDelete,scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="card-footer">
        <div>共&nbsp;{{ totalCount }}&nbsp;{{ "条数据" }}</div>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :total="totalCount"
          layout="prev, pager, next,sizes, jumper"
          size="small"
          @size-change="handleSizeChange"
          @current-change="init"
        />
      </div>
    </template>
  </el-card>
  <Add v-model="add_visible" @init="init"></Add>
  <Edit v-model="edit_visible" @init="init" :form-data="editRow"></Edit>
</template>

<script setup lang="ts">
import Add from "./components/Add.vue";
import Edit from "./components/Edit.vue"
import NavBar from "@/components/NavBar.vue";
import { DeleteUser, GetUserList } from "@/api/user";
import { ref } from "vue";
import loadsh from "lodash"
import {checkTime, imgUrl} from "@/global";
import { deleteMsg } from "@/global"
import { ElMessage } from "element-plus";
const search = ref<SearchInter>({} as SearchInter);
const tableData = ref<any[]>([]);
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const totalCount = ref<number>(0);
const editRow = ref<any>({})
const edit_visible = ref<boolean>(false)
const add_visible = ref<boolean>(false)


const init = async (page: number = 1) => {
  const res = await GetUserList({
    pageIndex: page,
    pageSize: pageSize.value,
    ...search.value,
  });
  if (res.code === 200) {
    totalCount.value = res.totalCount;
    tableData.value = res.data;
  } else {
    tableData.value = [];
  }
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  init(currentPage.value);
};

const handleEdit = (row: any) => {
  editRow.value = loadsh.cloneDeep(row)
  edit_visible.value = true
};

const handleDelete = async (row: any) => {
  const res = await DeleteUser([row.id])
  if (res.code === 200) {
    ElMessage.success(res.msg);
    init(currentPage.value);
  } else {
    ElMessage.error(res.msg);
  }
  
};
const reset = () => {
  search.value = {} as SearchInter;
  init();
};
init();
</script>

<style scoped></style>
